<!DOCTYPE html>
<html>
	<head>
		<!-- 设置浏览器不缓存 -->
		<META HTTP-EQUIV="pragma" CONTENT="no-cache">
		<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">
		<META HTTP-EQUIV="expires" CONTENT="0">
		<!-- Content-Type -->
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<!-- Favicon -->
		<link rel="shortcut icon" href="./images/logo.png">
		<title>企业服务共享中心-考勤管理</title>
		<!--stylesheets-->
		<link rel="stylesheet" href="./plugins/element/index.css">
		<script src="./plugins/vue/vue.js"></script>
		<script src="./plugins/element/index.js"></script>
		<script src="./plugins/axios/axios.min.js"></script>
		<script src="./plugins/QRCode/qrcode.js"></script>
		<script src="./js/common/public.js?v=0.8.0.3"></script>
		<!-- 自定义样式表 -->
		<link rel="stylesheet" href="./css/base.css?v=0.8.0.3">
	</head>
	<body>
		<div id="app">
			<template>
				<el-container class="maincontainer">
					<el-container class="submaincontainer">
						<el-card class="box-card" style="position:relative;width:330px" shadow="never" v-show="leftbar_show">
							<div style="position:absolute;left:0;top:0;right:0;bottom:0;overflow-y:auto;overflow-x:hidden;padding-left: 20px;padding-top: 20px;padding-right: 20px;">
								<el-form :model="queryForm" ref="queryForm" :rules="queryFormRules" >
									<el-form-item label="月份范围" prop="date">
										<el-date-picker style="width:235px" value-format="yyyy-MM-dd" v-model="queryForm.date" type="daterange" width="100"
										 align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
										 :picker-options="pickerOptions">
										</el-date-picker>
									</el-form-item>
									<el-form-item label="姓名" prop="yourname" maxlength="20" autocomplete="off">
										<el-input v-model="queryForm.yourname"></el-input>
									</el-form-item>
									<el-form-item label="在职状态" prop="status">
										<el-select v-model="queryForm.status" multiple placeholder="请选择" filterable>
											<el-option v-for="item in statuses" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="工作地点" prop="workpalce">
										<el-select v-model="queryForm.workpalce" multiple placeholder="请选择" filterable>
											<el-option v-for="item in workpalces" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="是否离职" prop="online">
										<el-select v-model="queryForm.online" multiple placeholder="请选择" filterable>
											<el-option v-for="item in onlines" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="是否签字" prop="writename">
										<el-select v-model="queryForm.writename" multiple placeholder="请选择" filterable>
											<el-option v-for="item in writenames" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item label="部门" prop="bumen">
										<el-select v-model="queryForm.bumen" multiple placeholder="请选择" filterable>
											<el-option v-for="item in bumens" :key="item" :label="item" :value="item">
											</el-option>
										</el-select>
									</el-form-item>
									<el-form-item>
										<el-button size="small" type="primary" @click.native.prevent="start" style="position:fixed;left:20px;bottom:5px;">查询</el-button>
									</el-form-item>
								</el-form>
							</div>
						</el-card>
						<el-card class="box-card" style="width:100%" shadow="never">
							<div slot="header" class="clearfix">
								<i v-on:click="showLeftBar()" v-bind:class="[leftbar_show ? 'el-icon-s-fold' : 'el-icon-s-unfold']" style="color:#409EFF;cursor:pointer;"></i>
								<span>用户信息</span>
								<el-button-group style="float:right;margin-top:0px;">
									<el-button size="small" icon="el-icon-document-copy"@click="dialogimportFormVisible = true">导入考勤</el-button>
									<el-button size="small" icon="el-icon-s-tools" @click="outerVisible = true">设置</el-button>
									<el-button size="small" icon="el-icon-document" type="primary">统计</el-button>
								</el-button-group>
							</div>
							<div>
								<el-table :data="TheNumber" border ref="multipleTable" :data="pagedata" tooltip-effect="dark" :height="tableHeight"
								 style="width: 100%;" size="medium">
									<el-table-column type="selection" min-width="55">
									</el-table-column>
									<el-table-column prop="number" label="序号" width="30">
									</el-table-column>
									<el-table-column prop="name" label="姓名" align="center" width="70">
									</el-table-column>
									<el-table-column prop="bumen" label="部门" align="center" width="70">
									</el-table-column>
									<el-table-column prop="month" label="本月考勤" width="50">
									</el-table-column>
									<el-table-column prop="real" label="实际出勤" width="50">
									</el-table-column>
									</el-table-column>
									<el-table-column label="缺勤天数" width="120" align="center">
										<el-table-column prop="sholiday" label="事假" width="30">
										</el-table-column>
										<el-table-column prop="illholiday" label="病假" width="30">
										</el-table-column>
										<el-table-column prop="yearholiday" label="年假" width="30">
										</el-table-column>
										<el-table-column prop="late" label="迟到" width="30">
										</el-table-column>
										<el-table-column prop="queka" label="缺卡" width="30">
										</el-table-column>
									</el-table-column>
									<el-table-column prop="day1" label="1" width="30">
									</el-table-column>
									<el-table-column prop="day2" label="2" width="30">
									</el-table-column>
									<el-table-column prop="day3" label="3" width="30">
									</el-table-column>
									<el-table-column prop="day4" label="4" width="30">
									</el-table-column>
									<el-table-column prop="day5" label="5" width="30">
									</el-table-column>
									<el-table-column prop="day6" label="六" width="30">
									</el-table-column>
									<el-table-column prop="day7" label="日" width="30">
									</el-table-column>
									<el-table-column prop="writename" label="签名" align="center" width="70">
									</el-table-column>
								</el-table>

								<div style="margin-top: 20px">
									<el-pagination @current-change="handleCurrentPageChange" :current-page="queryForm.pageNo" :page-sizes="queryForm.pagesizes"
									 background layout="total,sizes, prev, pager, next" :total="pagetotal">
									</el-pagination>
								</div>
							</div>
						</el-card>
					</el-container>
				</el-container>

				<el-dialog title="设置" :visible.sync="outerVisible" width="500px">
					<el-dialog title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
					</el-dialog>
					<el-row :gutter="20">
						<el-form ref="form" :model="form" label-width="80px">
							<el-form-item label="部门">
								<el-col :span="15">
									<el-select v-model="form.region" placeholder="请选择部门">
										<el-option label="市场部" value="shichangbu"></el-option>
										<el-option label="IT部" value="itbu"></el-option>
										<el-option label="会计部" value="kuaijibu"></el-option>
										<el-option label="人事部" value="renshibu"></el-option>
										<el-option label="财务部" value="caiwubu"></el-option>
									</el-select>
								</el-col>
							</el-form-item>
							<el-form-item label="休息日">
								<el-col :span="15">
									<el-date-picker type="dates" placeholder="选择日期" v-model="form.date1" style="width: 100%;"></el-date-picker>
								</el-col>
							</el-form-item>
						</el-form>
					</el-row>
					<div slot="footer" class="dialog-footer">
						<el-button @click="outerVisible = false">取 消</el-button>
						<el-button type="primary" @click="onSubmit">确 定</el-button>
					</div>
				</el-dialog>

				<el-dialog :close-on-click-modal="false" title="导入考勤" :visible.sync="dialogimportFormVisible" width="500px">
					<el-form :model="importForm" ref="importForm" label-width="80px">
						<el-row :gutter="20">
							<el-col :span="24" style="padding-left: 50px;">
								<el-upload class="upload-demo" drag :action="uploadurl + importForm.src + ',' + importForm.assignetype+ ',' + importForm.deptid"
								 :headers="headers" :before-upload="beforeAvatarUpload" :on-success="handleAvatarSuccess" accept=".xls,.xlsx"
								 multiple>
									<i class="el-icon-upload"></i>
									<div class="el-upload__text">将文件拖到此处，或<em>点击导入</em></div>
									<div class="el-upload__tip" slot="tip">
										只能导入XLS/XLSX文件，且不超过5mb<br>
									</div>
								</el-upload>
								<el-col>
						</el-row>
					</el-form>
				</el-dialog>
				<el-dialog :visible.sync="imgdialogVisible">
					<img width="100%" :src="imgdialogImageUrl" alt="">
				</el-dialog>
			</template>
		</div>
	</body>
	<script src="./js/worktime.js?v=0.8.0.3"></script>
</html>
